<template>
  <div class="order-table">
    <div class="searchBox">
      <div class="searchLine conditionLine">
        <label class="searchCondition">
          订单状态：
        </label>
        <el-badge
          v-for="(item,i) in statusList"
          :value="item.total"
          :key="i"
          class="item"
          :hidden="!item.total"
          :class="{'active':key===i}"
        >
          <el-button
            @click="chageStatus(i,item)"
            size="small">{{ item.status }}
          </el-button>
        </el-badge>
      </div>
      <!--label-width="120px"-->
      <form-renderer
        :content="searchContent"
        :label-position="'right'"
        inline
        ref="searchForm"
        label-width="auto"
      >
        <!-- <slot name="search"></slot> -->
        <el-form-item
          style="float:right;"
          v-if="searchContent.length > 0 ">
          <!-- native-type="submit" -->
          <el-button
            type="primary"
            @click="queryList"
            size="small">查询
          </el-button>
        </el-form-item>
      </form-renderer>
    </div>
    <!-- label-width="120px" prop字段宽度暂时弹性 -->
    <!-- 非跟台组件 -->
    <div
      class="tableList"
      v-loading="loading"
      v-if="saleOrderType !== 'follow'">
      <div
        v-for="(value,index) in tableArr"
        :key="index">
        <div
          class="tableTitle"
          @click="goDetail(value.list[0].mainOrderId)"
          v-if="value.mainOrderCode">订单主编号: {{ value.mainOrderCode }}
        </div>
        <el-table
          border
          :data="value.list"
          stripe
          @cell-click="cellClick"
          style="width: 100%;">
          <el-table-column
            :label="item.$label"
            v-for="(item,index) in colomArr"
            :key="index"
            :fixed="item.$fixed"
            :prop="item.$prop"
            :formatter="item.$formatter"
            :type="item.$type"
            :class-name="item.$className"
            :width="item.$width"
            :min-width="item.$minWidth"
            :show-tooltip-when-overflow="true"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="100">
            <template slot-scope="scope">
              <!-- <el-button
                type="text"
                @click="orderOperation(scope.row)"
                size="small">立即收货
              </el-button>-->
              <el-button
                type="text"
                @click="orderOperation(scope.row)"
                v-if="scope.row.orderStatus=== 2 && !isResiveAble"
                size="small"
              >立即发货
              </el-button>
              <el-button
                type="text"
                @click="orderOperation(scope.row)"
                v-if="scope.row.orderStatus=== 5 && !isResiveAble"
                size="small"
              >退回确认
              </el-button>
              <el-button
                type="text"
                @click="orderOperation(scope.row)"
                v-if="(scope.row.orderStatus=== 3 || scope.row.orderStatus=== 4) && isResiveAble"
                size="small"
              >立即收货
              </el-button>
              <el-button
                type="text"
                @click="orderOperation(scope.row)"
                v-if="scope.row.orderStatus=== 1 && !isResiveAble"
                size="small"
              >立即确认
              </el-button>
            </template>
          </el-table-column>
          <!-- 除已拒绝，待确认，待发货之外状态都可以查看 -->
          <el-table-column
            fixed="right"
            label="随货同行单"
            min-width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="!canNotCheckConsignmentSheet.includes(scope.row.orderStatus)"
                @click="orderDetail(scope.row)"
                size="small">查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="发票"
            v-if="showInvoice"
            min-width="100">
            <template slot-scope="scope">
              <!-- 已生成发票，显示下载发票 -->
              <!-- 否则、待发货、待收货、部分收货、已完成下，允许上传发票 -->
              <template v-if="scope.row.billUrl">
                <el-button
                  type="text"
                  @click="downloadPDF(scope.row.billUrl)"
                  size="small">下载pdf
                </el-button>
              </template>
              <template v-else>
                <el-button
                  v-if="roleType !== '1' && scope.row.mainOrderType === 1 && orderStatusCanUploadInvoice.includes(scope.row.orderStatus) && !isResiveAble"
                  type="text"
                  @click="handleUploadInvoice(scope.row)"
                  size="small">上传
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="tableArr.length"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        :page-sizes="PAGE_NUMBER"
        :layout="PAGINATION_LAYOUT"
        :total="total"
      />
    </div>
    <!-- 跟台组件 -->
    <div
      class="tableList"
      v-loading="loading"
      v-if="saleOrderType === 'follow'">
      <el-table
        stripe
        border
        :data="tableArr"
        @cell-click="cellClick"
        style="width: 100%;">
        <el-table-column
          :label="item.$label"
          v-for="(item,index) in colomArr"
          :key="index"
          :fixed="item.$fixed"
          :prop="item.$prop"
          :formatter="item.$formatter"
          :type="item.$type"
          :width="item.$width"
          :class-name="item.$className"
          :show-tooltip-when-overflow="true"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="orderOperation(scope.row)"
              v-if="scope.row.synState=== 2 && !isResiveAble"
              size="small"
            >立即发货
            </el-button>
            <el-button
              type="text"
              @click="orderOperation(scope.row)"
              v-if="scope.row.synState=== 8 && !isResiveAble"
              size="small"
            >术后退回
            </el-button>
            <el-button
              type="text"
              @click="orderOperation(scope.row)"
              v-if="(scope.row.synState=== 3 || scope.row.synState=== 4) && saleOrderType !== 'follow' && scope.row.orderType=== 3 && !isResiveAble"
              size="small"
            >立即收货
            </el-button>
            <el-button
              type="text"
              @click="orderOperation(scope.row)"
              v-if="(scope.row.synState=== 3 || scope.row.synState=== 4) && isResiveAble"
              size="small"
            >立即收货
            </el-button>
            <el-button
              type="text"
              @click="orderOperation(scope.row)"
              v-if="scope.row.synState === 1 && !isResiveAble"
              size="small"
            >立即确认
            </el-button>
          </template>
        </el-table-column>
        <!-- 除已拒绝，待确认，待发货之外状态都可以查看 -->
        <el-table-column
          fixed="right"
          label="随货同行单"
          width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="!canNotCheckConsignmentSheet.includes(scope.row.synState)"
              @click="orderDetail(scope.row)"
              size="small">查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableArr.length"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        :layout="PAGINATION_LAYOUT"
        :total="total"
      />
    </div>

    <!-- 上传发票弹框 -->
    <el-dialog
      title="上传发票"
      width="337px"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :visible.sync="showUploadInvoiceDialog"
    >
      <el-form
        label-width="80px"
        :rules="uploadRules"
        ref="uploadInvoiceFormRef"
        :model="uploadInvoiceForm">
        <el-form-item
          label="发票代码"
          prop="billCode"
        >
          <el-input
            placeholder="请输入"
            v-model="uploadInvoiceForm.billCode" />
        </el-form-item>
        <el-form-item
          label="发票号码"
          prop="billNo"
        >
          <el-input
            placeholder="请输入"
            v-model="uploadInvoiceForm.billNo" />
        </el-form-item>
        <el-form-item
          label="发票金额"
          prop="billMoney"
        >
          <el-input
            placeholder="请输入"
            v-model="uploadInvoiceForm.billMoney" />
        </el-form-item>
        <el-form-item
          label="开票日期"
          prop="billDate"
        >
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            prefix-icon="el-icon-date"
            format="yyyy-MM-dd HH:mm:ss"
            v-model="uploadInvoiceForm.billDate"
          />
        </el-form-item>
        <el-form-item
          label=""
          prop="billUrl"
        >
          <el-upload
            name="file"
            :action="fileUpload"
            :disabled="uploadLoading"
            :accept="uploadAccept"
            style="text-align: right;"
            :show-file-list="false"
            :http-request="httpUpload"
            :before-upload="handleBeforeUpload">
            <el-button
              size="small"
              type="text"
              :loading="uploadLoading"
            >
              上传附件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer">
        <el-button
          :loading="uploadLoading"
          @click="handleUploadInvoiceDialogCancel()">取消
        </el-button>
        <el-button
          type="primary"
          :loading="uploadLoading"
          @click="handleUploadInvoiceDialogConfirm()">确定
        </el-button>
      </div>
    </el-dialog>
    <!-- 随货同行单接口制作 -->
    <el-dialog
      :visible.sync="flowOrderDialog"
      :show-close="peerListFlag"
      v-loading="!peerListFlag"
      width="1366px">
      <div
        id="peerListDOM"
        class="peer-list-dom">
        <div class="flowDialogTitle">
          {{ flowOrder.name }}
          <span
            v-if="peerListFlag"
            class="peer-list-download"
            @click.stop="peerListDownLoadPDF">下载</span>
        </div>
        <div class="flowDialogTime">{{ flowOrder.createdAt }}</div>
        <div class="head-company">
          <div class="head-left">
            <div class="flowDialogFooter-top">
              <span class="des"><span class="title">购货单位:</span> {{ flowOrder.purchaseName }}</span>
            </div>
            <div class="flowDialogFooter-top">
              <span class="des"><span class="title">收货地址:</span> {{ flowOrder.receiveAddress }}</span>
            </div>
          </div>
          <div class="head-right">
            <img
              src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=228636985,71852564&fm=26&gp=0.jpg"
              width="200px"
              alt
            >
          </div>
        </div>
        <div class="flowDialogFooter">
          <span class="des"><span class="title">联系人:</span> {{ flowOrder.contactName }}</span>
          <span class="des"><span class="title">联系电话: </span> {{ flowOrder.contactTelephone }}</span>
          <span class="des"><span class="title">订单号: </span> {{ flowOrder.orderCode }}</span>
        </div>
        <el-table
          :data="flowOrder.ocOrderSkuVoList"
          stripe
          style="width: 100%;">
          <el-table-column
            type="index"
            width="50"
            label="序号" />
          <el-table-column
            prop="itemCode"
            label="产品通用编码"
            :show-overflow-tooltip="true"
            min-width="140"/>
          <el-table-column
            prop="itemName"
            min-width="160"
            :show-overflow-tooltip="true"
            label="产品名称"/>
          <el-table-column
            prop="nameEn"
            min-width="160"
            :show-overflow-tooltip="true"
            label="产品名称（英）"/>
          <el-table-column
            prop="specification"
            min-width="100"
            :show-overflow-tooltip="true"
            label="规格"/>
          <el-table-column
            prop="unit"
            min-width="50"
            :show-overflow-tooltip="true"
            label="单位" />
          <el-table-column
            prop="deliveredAmout"
            min-width="80"
            :show-overflow-tooltip="true"
            label="数量" />
          <el-table-column
            prop="itemPrice"
            min-width="60"
            :show-overflow-tooltip="true"
            label="单价" />
          <el-table-column
            prop="totalMoney"
            min-width="80"
            :show-overflow-tooltip="true"
            label="总金额">
            <template slot-scope="scope">
              <span style="margin-left: 10px;">{{ scope.row.itemPrice * scope.row.deliveredAmout }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            :show-overflow-tooltip="true"
            label="生产批号" />
          <el-table-column
            prop="productionTime"
            label="生产日期"
            :show-overflow-tooltip="true"
            min-width="100" />
          <el-table-column
            prop="validDate"
            label="有效期"
            :show-overflow-tooltip="true"
            min-width="100" />
          <el-table-column
            prop="registNo"
            :show-overflow-tooltip="true"
            label="注册证号(或备案号)"
            min-width="180" />
          <el-table-column
            prop="manufacturer"
            min-width="120"
            :show-overflow-tooltip="true"
            label="生产企业"/>
        </el-table>
        <div class="flowDialogFooter">
          <span
            v-if="flowOrder.billingClerk"
            class="des"><span class="title">开票员 :</span> {{ flowOrder.billingClerk }}</span>
          <span class="des"><span class="title">发货员 :</span> {{ flowOrder.deliveryPerson }}</span>
          <span class="des"><span class="title">复核员 :</span> {{ flowOrder.checker }}</span>
          <span class="des"><span class="title">签收人 :</span> {{ flowOrder.receiver }}</span>
        </div>
        <div class="flowDialogFooter-bottom">
          <span class="des"><span class="title">地址 :</span> {{ flowOrder.sendAddress }}</span>
          <span class="des"><span class="title">电话 :</span> {{ flowOrder.sendTelephone }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/*
 1.操作、随货同行单、发票应暂时不确定后台字段,无法预设动态暂时写死,后期放开$emit 携带row-data外部处理.
 2.事件集中emit数据,外部进行操作处理
 */
// import FormRenderer from '@/components/el-form-renderer/index.js' 需要用到output监听弃用
// import qs from 'qs'

import FormRenderer from '@femessage/el-form-renderer'
import { PAGE_NUMBER, PAGINATION_LAYOUT, PDF_LIMIT_SIZE } from '@const/common'

import {
  fileUpload,
  getDiffOrderStatusAmount,
  queryFollowGoodsOrder,
  queryFollowOtherGoodsOrder,
  putWholesaleAssociateBill,
  peerListUp
} from '@const/api'
import domToImage from 'dom-to-image'
import { urlDownload } from '@const/utils.js'
import { hasIn } from 'lodash'

import { mapState } from 'vuex'

export default {
  name: 'InputExample',
  data () {
    return {
      peerListFlag: true, // 控制dialog右上角的关闭icon
      orderStatusCanUploadInvoice: [2, 3, 4, 5, 6],
      // 定义不能查看同行单的状态
      canNotCheckConsignmentSheet: [0, 1, 2],
      content: [
        {
          $id: 'orderType',
          $type: 'select',
          label: '订单类型',
          $el: {
            placeholder: '全部'
          },
          $options: [
            { label: '待处理订单', value: '' },
            { label: '待确认', value: '' },
            { label: '待发货', value: '' },
            { label: '待收货', value: '' },
            { label: '部分收货', value: '' },
            { label: '已拒绝', value: '' }
          ]
        },
        {
          $id: 'date',
          $type: 'date-picker',
          label: '提交时间',
          $el: {
            // type: 'daterange',   // 如果 type 为 daterange，则获取到的是一个数组
            placeholder: '请选择',
            valueFormat: 'yyyy-MM-dd' // 不使用 value-format 属性，则获取到的是一个空对象，格式请参考 element-ui 组件 date-picker 的日期格式部分
          }
        },
        {
          $id: 'title',
          $type: 'input',
          label: '订单编号',
          $el: {
            placeholder: '请输入订单编号',
            style: 'width: 270px'
          }
        },
        {
          $id: 'caigoufang',
          $type: 'input',
          label: '采购方',
          $el: {
            placeholder: '请输入采购方信息',
            style: 'width: 270px'
          }
        },
        {
          $id: 'proName',
          $type: 'input',
          label: '包含的产品名称',
          $el: {
            placeholder: '请输入产品名称',
            style: 'width: 270px'
          }
        },
        {
          $id: 'goodsName',
          $type: 'input',
          label: '商品名称',
          $el: {
            placeholder: '请输入',
            style: 'width: 270px'
          }
        }
      ],
      key: 0,
      PAGE_NUMBER, // 分页类型
      PAGINATION_LAYOUT, // 分页功能
      loading: false,
      flowOrderDialog: false,
      flowOrder: {},
      page: 1,
      size: PAGE_NUMBER[0],
      total: 0,
      extraParams: {
        orderStatus: '',
        saleOrderType: '',
        orderRole: 1
      },
      tableArr: [
        {
          list: [],
          mainOrderCode: ''
        }
      ],
      uploadLoading: false,
      uploadAccept: 'application/pdf',
      uploadInvoiceForm: {},
      showUploadInvoiceDialog: false,
      uploadRules: {
        billCode: [
          { required: true, message: '发票代码为必填项', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{1,30}$/, message: '发票代码必须是数字和字母组合', trigger: 'blur' }
        ],
        billNo: [
          { required: true, message: '发票号码为必填项', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{1,30}$/, message: '发票号码必须是数字和字母组合', trigger: 'blur' }
        ],
        billMoney: [
          { required: true, message: '发票金额为必填项', trigger: 'blur' },
          { pattern: /^(([1-9]\d*)|0)(\.\d{1,2})?$/, message: '发票金额必须为数字', trigger: 'blur' }
        ],
        billDate: { type: 'date', required: true, message: '开票日期为必选项', trigger: 'change' }
        // billUrl: { required: true, message: '附件为必选项', trigger: 'change' }
      }
    }
  },
  props: {
    showInvoice: { // 是否显示发票栏
      type: Boolean,
      default: false
    },
    isResiveAble: {
      type: Boolean,
      default: false
    },
    queryOrderStatus: {
      type: String,
      default: ''
    },
    paginationAble: {
      type: Boolean,
      default: false
    },
    saleOrderType: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    searchContent: {
      type: Array,
      default: () => {
        return []
      }
    },
    colomArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    statusList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    // roleType 0 经营企业  1 医院
    ...mapState(['roleType'])
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (this.isResiveAble) {
        this.extraParams.orderRole = 1
      } else {
        this.extraParams.orderRole = 2
      }
      this.extraParams.orderStatus = this.statusList[ 0 ].value
      this.extraParams.saleOrderType = this.saleOrderType || 'purchase'
      if (this.queryOrderStatus) {
        let flagIndex = 0
        this.statusList.some((item, index) => {
          if (item.value === this.queryOrderStatus) {
            flagIndex = index
            return true
          }
        })
        this.key = flagIndex
        this.extraParams.orderStatus = this.queryOrderStatus
      }
      this.diffOrderStatus()
      this.search()
    },
    // 获取订单状态数量tag
    diffOrderStatus () {
      this.$axios.get(`${getDiffOrderStatusAmount}?saleOrderType=${this.saleOrderType}&orderRole=${this.extraParams.orderRole}`).then(res => {
        let obj = res.data.payload || {}
        this.statusList.forEach(item => {
          for (let key in obj) {
            if (item.value === key) {
              item.total = obj[ key ]
            }
          }
        })
      })
    },
    handleSizeChange (val) {
      this.size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page = val
      this.search()
    },
    getList () {
      // 外部刷新table
      this.search()
      this.diffOrderStatus()
    },
    goDetail (id) {
      this.$emit('goDetail', id)
    },
    queryList () {
      this.page = 1
      this.search()
    },
    search () {
      let params = this.$refs.searchForm.getFormValue()
      this.loading = true
      this.$axios
        .post(
          `${this.url}?page=${this.page}&size=${this.size}`,
          Object.assign({}, this.extraParams, params)
        )
        .then(res => {
          const { data } = res
          if (!Number(data.code)) {
            if (hasIn(data, ['payload', 'content'])) {
              // 这里兼容处理 跟台和非跟台 两种tableArr数据结构
              if (data.payload.content.length) {
                this.tableArr = data.payload.content
              } else {
                this.tableArr = Object.is(this.saleOrderType, 'follow')
                  ? []
                  : [{
                    list: [],
                    mainOrderCode: ''
                  }]
              }
            }
          }
          this.total = data.payload.totalElements || 0
        }).finally(() => {
          this.loading = false
        })
    },
    orderOperation (row) {
      // 操作事件
      this.$emit('orderOperation', row)
    },
    orderDetail (row) {
      // 随货同行单改为内部处理,因通用性.
      // this.$emit('orderDetail', row)
      this.flowOrderDialog = true
      if (row.mainOrderType === 1 || row.mainOrderType === 2) {
        this.$axios
          .get(queryFollowGoodsOrder, {
            params: {
              orderId: row.orderId
            }
          })
          .then(res => {
            this.flowOrder = res.data.payload
          })
      }
      if (row.orderType === 4) {
        this.$axios
          .get(queryFollowOtherGoodsOrder, {
            params: {
              orderId: row.id
            }
          })
          .then(res => {
            this.flowOrder = res.data.payload
          })
      }
    },
    // 点击下载pdf逻辑
    downloadPDF (billUrl) {
      location.href = billUrl
    },
    // 随货同行单下载
    peerListDownLoadPDF () {
      this.peerListFlag = false
      this.$nextTick(() => {
        domToImage.toJpeg(document.getElementById('peerListDOM'), { quality: 1 })
          .then((dataUrl) => {
            this.peerListFlag = true
            this.$axios({
              method: 'post',
              url: peerListUp,
              data: {
                name: null,
                text: dataUrl.slice(23)
              }
            })
              .then(res => {
                if (res.data && res.data.payload) {
                  urlDownload(res.data.payload)
                } else {
                  this.$message({ type: 'error', message: '生成随货同行单PDF失败' })
                }
              })
          })
      })
    },
    // 处理点击上传按钮逻辑
    handleUploadInvoice (row) {
      this.resetUploadInvoiceForm(row.orderId)
      this.showUploadInvoiceDialog = true
    },
    // 监听上传之前事件
    handleBeforeUpload (file) {
      this.uploadLoading = true
      const isPDF = file.type.includes(this.uploadAccept)
      const isLt1M = file.size / 1024 / 1024 <= PDF_LIMIT_SIZE

      if (!isPDF) {
        this.uploadLoading = false
        this.$message.error('上传文件只支持PDF类型!')
        return false
      }
      if (!isLt1M) {
        this.uploadLoading = false
        this.$message.error('上传文件大小不能超过 1MB!')
        return false
      }
    },
    // 上传接口
    httpUpload ({ file }) {
      // 发起请求
      let fd = new FormData()
      fd.append('file', file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      })
        .then(res => {
          const { data } = res
          if (!Number(data.code)) {
            this.$message.success('上传成功')
            this.uploadInvoiceForm.billUrl = data.payload
          } else {
            this.$message.error(data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error.message)
        })
        .finally(() => {
          this.uploadLoading = false
        })
    },
    // 上传发票对话框 确定、取消 按钮处理逻辑
    handleUploadInvoiceDialogConfirm () {
      this.$refs.uploadInvoiceFormRef.validate(async valid => {
        if (valid) {
          const param = { ...this.uploadInvoiceForm, billDate: this.uploadInvoiceForm.billDate.getTime() }
          const { data } = await this.$axios.put(putWholesaleAssociateBill, param)
          if (!Number(data.code)) {
            this.search()
            this.$message.success('发票关联成功')
            this.handleUploadInvoiceDialogCancel()
          }
        }
      })
    },
    handleUploadInvoiceDialogCancel () {
      this.resetUploadInvoiceForm()
      this.$refs.uploadInvoiceFormRef.resetFields()
      this.showUploadInvoiceDialog = false
    },
    // 重置上传发票表单
    // @param id 批发订单ID
    resetUploadInvoiceForm (id = '') {
      this.uploadInvoiceForm = {
        id,
        billCode: '',
        billNo: '',
        billDate: '',
        billMoney: '',
        billUrl: ''
      }
    },
    chageStatus (n, item) {
      this.key = n
      this.extraParams.orderStatus = item.value
      // this.$refs.searchForm.resetFields() 切换状态重置searchForm
      this.queryList()
    },
    cellClick (row, col, cell) {
      this.$emit('cellClick', row, col)
    }
  },
  components: {
    FormRenderer
  }
}
</script>

<style lang="less">
  .order-table {
    background-color: #f7f8fa;

    .pagination {
      padding: 5px 0 12px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }

    .el-form--inline .el-form-item {
      margin-right: 60px;

      .el-input {
        width: 270px;
      }
    }

    .searchBox {
      padding: 20px;
      background: white;

      .searchLine {
        margin-bottom: 20px;

        .searchCondition {
          color: #26344c;
          line-height: 34px;
          font-size: 14px;
          padding: 0 12px 0 0;
        }
      }

      .conditionLine {
        min-height: 45px;
        line-height: 40px;

        .el-button {
          border: 0;
          color: black;
          background: transparent;

          &.el-button--default:hover {
            background: transparent;
            color: black;
          }
        }

        .active {
          border-bottom: 1px solid #2371c5;

          .el-button {
            font-size: 20px;
            color: #2371c5;

            &.el-button--default:hover {
              background: transparent;
              color: #2371c5;
            }
          }
        }

        .el-badge {
          margin-right: 14px;

          .el-badge__content.is-fixed {
            right: 20px;
          }
        }
      }

      .el-form-item {
        .el-date-editor--daterange {
          width: 270px;
        }
      }
    }

    .tableList {
      margin-top: 15px;
      background: white;
      padding: 20px;

      .tableTitle {
        cursor: pointer;
        color: #26344c;
        font-size: 16px;
        font-weight: bold;
        line-height: 36px;
      }

      .el-table {
        margin-bottom: 10px;

        .el-table__header {
          th {
            background-color: #eceef3;
            color: #696d74;
          }
        }

        .el-table__body {
          .el-table__row {
            td {
              &.idCode {
                cursor: pointer;
                color: #2371c5;
              }
            }
          }
        }
      }
    }

    .el-dialog {
      width: 70%;

      .head-company {
        display: flex;

        .head-left {
          flex: 0 70%;
        }

        .head-right {
          flex: 0 30%;
        }
      }

      .flowDialogTitle {
        text-align: center;
        font-weight: bold;
        font-size: 16px;

        .peer-list-download {
          float: right;
          cursor: pointer;
        }
      }

      .flowDialogTime {
        text-align: center;
        padding: 10px 0;
      }

      .flowDialogFooter-top {
        margin-bottom: 20px;

        .title {
          color: #a7b1c7;
        }
      }

      .flowDialogFooter-bottom {
        margin-top: 10px;

        .des {
          display: inline-block;
          min-width: 120px;
        }

        .title {
          color: #a7b1c7;
        }
      }

      .flowDialogFooter {
        color: #26344c;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;

        .des {
          display: inline-block;
          min-width: 120px;
        }

        .title {
          color: #a7b1c7;
        }

        div {
          flex: 0 25%;
          padding: 5px 0;

          .des {
            display: inline-block;
            width: 65px;
            color: #a7b1c7;
            text-align: right;
          }
        }
      }

      .dialogTitle {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 32px;
      }

      .dialogDes {
        text-align: center;
      }

      .peer-list-dom {
        background-color: #fff;
      }
    }
  }
</style>
